//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Button,
    Dropdown,
    Menu,
    Modal,
} from 'antd';

const FormItem = Form.Item;

//查看表单
@Form.create()
class ViewForm extends PureComponent {
    static defaultProps = {
        handleViewModalVisible: () => {},
    values: {},
};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
            id: props.values.id,
            article_id: props.values.article_id,
            images_client: props.values.images_client,
            images_type: props.values.images_type,
            type_store: props.values.type_store,
            goods_commonid: props.values.goods_commonid,
            color_id: props.values.color_id,
            goods_image: props.values.goods_image,
            goods_image_samll: props.values.goods_image_samll,
            goods_image_sort: props.values.goods_image_sort,
            is_default: props.values.is_default,
        },
    };


}



renderContent = (formVals) => {
    const { form } = this.props;

    return (
        <Form  layout="vertical" hideRequiredMark>


               <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="图片显示终端">
	                        {form.getFieldDecorator('images_client', {
	                        rules: [{ required: true, message: '请输入至少五个字符的图片显示终端！', min: 5 }],
	                        initialValue: formVals.images_client,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="图片缩略,微图,大图">
	                        {form.getFieldDecorator('images_type', {
	                        rules: [{ required: true, message: '请输入至少五个字符的图片缩略,微图,大图！', min: 5 }],
	                        initialValue: formVals.images_type,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="图片存储位置">
	                        {form.getFieldDecorator('type_store', {
	                        rules: [{ required: true, message: '请输入至少五个字符的图片存储位置,本地，七牛，又拍云，百度云，腾讯云！', min: 5 }],
	                        initialValue: formVals.type_store,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="公共内容id">
	                        {form.getFieldDecorator('goods_commonid', {
	                        rules: [{ required: true, message: '请输入至少五个字符的公共内容id！', min: 5 }],
	                        initialValue: formVals.goods_commonid,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="颜色规格值id">
	                        {form.getFieldDecorator('color_id', {
	                        rules: [{ required: true, message: '请输入至少五个字符的颜色规格值id！', min: 5 }],
	                        initialValue: formVals.color_id,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="图片原图">
	                        {form.getFieldDecorator('goods_image', {
	                        rules: [{ required: true, message: '请输入至少五个字符的图片原图！', min: 5 }],
	                        initialValue: formVals.goods_image,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="图片封面">
	                        {form.getFieldDecorator('goods_image_samll', {
	                        rules: [{ required: true, message: '请输入至少五个字符的图片封面！', min: 5 }],
	                        initialValue: formVals.goods_image_samll,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
	                    <FormItem  label="排序">
	                        {form.getFieldDecorator('goods_image_sort', {
	                        rules: [{ required: true, message: '请输入至少五个字符的排序！', min: 5 }],
	                        initialValue: formVals.goods_image_sort,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>



                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>


                    <Col  md={12} sm={24}>
	                    <FormItem  label="默认主题，1是，0否">
	                        {form.getFieldDecorator('is_default', {
	                        rules: [{ required: true, message: '请输入至少五个字符的默认主题，1是，0否！', min: 5 }],
	                        initialValue: formVals.is_default,
	                        })(<Input  readOnly placeholder="请输入" />)}
	                    </FormItem>
                    </Col>

                </Row>



    </Form>
);

};



render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;
    const { formVals } = this.state;

    return (
        <Modal
    width={800}
    height={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    onCancel={() => handleViewModalVisible(false, values)}
    footer={<Button key="back" onClick = { () => handleViewModalVisible(false, values) }>取消</Button>}
>

    {this.renderContent(formVals)}
</Modal>
);
}

}

export default ViewForm;






